<template>
  <div >

      <div class="navbar-mobile" v-if="isMobile" >
        <el-row style="position: relative;">
          <el-col :span="24" :xs="24" style="display: flex">

            <img
                style="width: 30px;"
                :src= "mhLogoSrc"
                alt="Element logo"
            />
            <div class="mobile-menu-content" style="display:flex;padding-left: 10px;width: 90%">
              <div class="el-input__wrapper" tabindex="-1"  >
                <input class="el-input__inner" type="text" autocomplete="off" tabindex="0" placeholder="请输入" id="el-id-5263-280">
                <span class="el-input__suffix">
                    <span class="el-input__suffix-inner">
                      <i class="el-icon el-input__icon">
                        <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="m795.904 750.72 124.992 124.928a32 32 0 0 1-45.248 45.248L750.656 795.904a416 416 0 1 1 45.248-45.248zM480 832a352 352 0 1 0 0-704 352 352 0 0 0 0 704z"></path></svg>
                      </i>
                    </span>
                  </span>
              </div>

              <button  @click="toggleMenu" class="menu-button" style="float: right">&#9776;</button>
            </div>

          </el-col>

        </el-row>
        <el-row v-if="isMenuOpen" style="z-index: 3">
          <el-col :span="24">
            <div class="mobile-menu">
              <ul>
                <li @click="mobileRouterTo(1,'')">墨鹄育香</li>
                <li @click="mobileRouterTo(2,'')">智能对话</li>
                <li @click="mobileRouterTo(3,'')">今是何年</li>
                <li @click="mobileRouterTo(4,'')">知识仓库</li>
                <li @click="mobileRouterTo(5,'')">情绪树洞</li>
                <li @click="mobileRouterTo(6,'')">关于我</li>
                <li @click="mobileRouterTo(7,'')">控制台</li>
                <li @click="mobileRouterTo(8,'')">有彩蛋哦</li>
                <li @click="mobileRouterTo(9,'')">知识共创</li>

              </ul>

            </div>
          </el-col>

        </el-row>
      </div>


      <div v-if="!isMobile" >
        <!-- 导航菜单内容 -->
        <el-menu
            :default-active="1"
            class="el-menu-demo"
            mode="horizontal"
            text-color="#fff"
            active-text-color="#000"
            :ellipsis="false"
            @select="handleSelect"
            id="transparent-menu"
        >
          <el-menu-item index="0" id="disabled-menu-item">
            <img
                style="width: 50px"
                :src= "mhLogoSrc"
                alt="Element logo"
            />
          </el-menu-item>

          <el-menu-item index="1"><span>墨鹄育香</span></el-menu-item>
          <el-menu-item index="8" id="disabled-menu-item-search">

            <div class="el-input__wrapper" tabindex="-1" >
              <input class="el-input__inner" type="text" autocomplete="off" tabindex="0" placeholder="请输入" id="el-id-5263-280">
              <span class="el-input__suffix">
            <span class="el-input__suffix-inner">
              <i class="el-icon el-input__icon">
                <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="m795.904 750.72 124.992 124.928a32 32 0 0 1-45.248 45.248L750.656 795.904a416 416 0 1 1 45.248-45.248zM480 832a352 352 0 1 0 0-704 352 352 0 0 0 0 704z"></path></svg>
              </i>
            </span>
          </span>
            </div>
          </el-menu-item>

          <div class="flex-grow" />
          <el-menu-item index="2" >智能对话</el-menu-item>
          <el-menu-item index="3">今是何年</el-menu-item>
          <el-menu-item index="4">知识仓库</el-menu-item>

          <el-menu-item index="5" >情绪树洞</el-menu-item>
          <el-menu-item index="6" >关于我</el-menu-item>
          <el-menu-item index="7" >控制台</el-menu-item>
          <el-menu-item index="8" >有彩蛋哦</el-menu-item>
          <el-menu-item index="9" >知识共创</el-menu-item>
        </el-menu>
        <!-- 其他导航链接... -->
      </div>



    <div style="m" v-if="this.$mhconfig.mechine === 'PC' || this.$mhconfig.mechine === 'desktopPC' || this.$mhconfig.mechine === 'pad'"></div>
<!--    <div style="margin-bottom: 60px" v-if="this.$mhconfig.mechine === 'mobile'"></div>-->
<!--    页面内容区域-->
    <router-view @click="closeMobileMenu" class="indexrouterview"></router-view>

  </div>


</template>

<script>
  // import { ref } from 'vue'
  // import { Search } from '@element-plus/icons-vue'
  // import { ElMessageBox } from 'element-plus'


  export default {
    name: "BlogIndex",
    // components:Search,
    data(){
      return {
        dialogTableVisible: true,
        mhLogoSrc:this.$mhconfig.imgUrl+"/img/mhblog-logo.png",
        isMenuOpen: false,
        isMobile: false
        // SearchIcon:this.$mhconfig.apiUrl+"/img/mhblog-logo.png"
      }
    },
    methods:{
      showDialog() {
        this.dialogVisible = true;
      },
      mobileRouterTo(key, keyPath){
        this.toggleMenu()
        this.handleSelect(key,keyPath)
      },
      closeMobileMenu(){
        this.isMenuOpen = false
      },
      toggleMenu() {
        this.isMenuOpen = !this.isMenuOpen;
      },
      checkScreenWidth() {
        // 根据屏幕宽度判断是否为移动设备
        this.isMobile = window.innerWidth <= 600; // 你可以根据实际需求设置阈值
        const elements = document.querySelectorAll('.indexrouterview');

        if( this.$mhconfig.mechine === 'PC' ) {// 台式电脑
          elements.forEach( ele =>{
            ele.style.marginTop = '80px';
          })
        }else if(this.$mhconfig.mechine === 'desktopPC'){//笔记本电脑
          elements.forEach( ele =>{
            ele.style.marginTop = '80px';
          })
        }else if(this.$mhconfig.mechine === 'pad'){//平板电脑
          elements.forEach( ele =>{
            ele.style.marginTop = '80px';
          })

        }
        // else { // 移动设备
        //   elements.forEach(ele => {
        //     ele.style.marginTop = '50px';
        //   })
        // }

      },
      showMessage(){
        this.$message('Hello ,Ele');
      },
      handleSelect(key, keyPath){
        console.log(key, keyPath)
        if(key == 1){
          this.$router.push("/");
        }
        if(key == 2){
          this.$router.push("/starfire");
        }
        if(key == 3){
          this.$router.push("/yourthoughts");
        }
        if(key == 4){
          this.$router.push("/KnowledgeIndex");
        }
        if(key == 5){
          this.$router.push("/contributearea");
        }
        if(key == 6){
          this.$router.push("/aboutme");
        }
        if(key == 7){
          this.$router.push("/console");
        }
        if(key=='6-2'){
          this.$router.push("/elasticSearch");
        }
        if(key=='8'){
          this.$router.push("/happynewyear");
        }
        if(key=='9'){
          this.$router.push("/wikiHome");
        }
      }
    },
    beforeCreate() {
      // ElMessageBox.alert(
      //     '<strong>proxy is <i>HTML</i> string</strong>',
      //     'HTML String',
      //     {
      //       dangerouslyUseHTMLString: true,
      //       cancelButtonText: 'Discard Changes'
      //     }
      //     )
    },
    mounted() {
      // 在组件挂载后检查屏幕宽度
      this.checkScreenWidth();
      // 添加屏幕尺寸变化的事件监听器
      window.addEventListener('resize', this.checkScreenWidth);
    },
    // beforeDestroy() {
    //   // 在组件销毁前移除事件监听器
    //   window.removeEventListener('resize', this.checkScreenWidth);
    // },
  }
</script>

<style scoped>



/*导航栏的背景为透明*/
#transparent-menu {
  /*position: -webkit-sticky;*/
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 80px;
  /* 神秘紫蓝渐变 */
  /* background: linear-gradient(135deg, #c850c0, #4158d0);*/

  /* 天空蓝渐变 */
  /* background: linear-gradient(135deg, #a1c4fd, #c2e9fb);*/

  /* 瑰丽紫红渐变 */
  /* background: linear-gradient(135deg, #ff9a9e, #fad0c4);*/

  /* 温暖阳光渐变 */
  /* background: linear-gradient(135deg, #f6d365, #fda085);*/

  /* 自然绿意渐变*/
  /* background: linear-gradient(135deg, #a8e063, #56ab2f);*/

  /*background-color: #CA3A38;*/
  /*  神秘暗夜渐变 */
  /*background: linear-gradient(135deg, #a1c4fd, #c2e9fb);*/
  /*background: linear-gradient(135deg, #292a3a, #536976);*/
  /* 雪山冰川渐变 */
  /*background: linear-gradient(135deg, #c7e9fb, #a6defa, #80d4f9, #5bc9f8, #35bef7);*/

  /* 金属质感渐变 */
  /*background: linear-gradient(135deg, #272727, #4a4a4a, #6d6d6d, #909090, #b3b3b3, #d6d6d6, #f9f9f9);*/

  /* 星空夜幕渐变 */
  /*background: linear-gradient(135deg, #001f3f, #0088a9, #00c9a7, #92d5c6, #ebf5ee);*/

  /* 幻红 */
  /*background: linear-gradient(135deg, #001f3f, #a9002d, #b9338a, #a06abb, #ebf5ee);*/

  /* 红蓝对抗*/
  background: linear-gradient(135deg, #3d0d0d, #ee0d48, #b535d2, #2248f1, #ebf5ee);

  /*background-image:linear-gradient(to top, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));*/
  border: none !important;/*清除边框*/
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
  z-index: 1000;
}
#transparent-menu .el-menu-item:hover{
  background-color: transparent !important;
  border-bottom: 2px solid #73767a;


  /*border: none !important;!*清除边框*!*/
}
#transparent-menu .el-menu-item:focus {
  background-color: transparent !important;
}



#disabled-menu-item{
  pointer-events: none; /* 禁用鼠标事件 */
  cursor: not-allowed; /* 鼠标样式显示为不允许点击 */
}
#disabled-menu-item-search{
  color: inherit !important;
  background-color: transparent  !important;
  border: none !important;
}

.flex-grow {
  flex-grow: 1;
}


/*!* 样式调整，使其在小屏幕上进行布局变化 *!*/
/*@media (max-width: 600px) {*/
/*  .navbar {*/
/*    !* 在小屏幕上设置弹性布局 *!*/
/*    display: flex;*/
/*    flex-direction: column;*/
/*  }*/
/*  .navbar-header {*/
/*    !* 设置导航栏头部样式 *!*/
/*    display: flex;*/
/*    justify-content: space-between;*/
/*    align-items: center;*/
/*  }*/
/*  .menu-button {*/
/*    !* 按钮样式 *!*/
/*    background: none;*/
/*    border: none;*/
/*    font-size: 1.5em;*/
/*    cursor: pointer;*/
/*  }*/
/*  .navbar-menu {*/
/*    !* 导航菜单样式 *!*/
/*    display: flex;*/
/*    flex-direction: column;*/
/*    align-items: center;*/
/*  }*/
/*}*/


/* 样式调整，使其在小屏幕上进行布局变化 */
@media (max-width: 600px) {
  .navbar {
    /* 在小屏幕上设置弹性布局 */
    display: flex;
    flex-direction: column;
  }
  .navbar-header {
    /* 设置导航栏头部样式 */
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .menu-button {
    /* 按钮样式 */
    background: none;
    border: none;
    font-size: 1.5em;
    cursor: pointer;
  }
  .navbar-menu {
    /* 导航菜单样式 */
    display: flex;
    flex-direction: column;
    align-items: center;
  }
}
.fade-in {
  opacity: 0;
  transition: opacity 0.5s;
}

.fade-out {
  opacity: 1;
  transition: opacity 0.5s;
}
</style>